<template>
  <!-- 重置密码 -->
  <a-modal
    v-model:visible="visible"
    :title="t('routes.user.resetPwd')"
    @ok="handleResetPwd"
    @cancel="handleResetClose"
  >
    <div class="flex items-center">
      <span class="whitespace-nowrap">
        {{ t("routes.user.newPassword") }}：
      </span>
      <a-input-password
        v-model:value="newPassword"
        :placeholder="t('routes.user.newPasswordPlaceholder')"
      />
    </div>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { InputPassword, Modal } from "ant-design-vue";
import { message as Message } from "ant-design-vue";
import { resetUserPwd } from "@/api/admin/system/user";

import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

export default defineComponent({
  components: {
    "a-input-password": InputPassword,
    "a-modal": Modal,
  },
  setup(props, { expose }) {
    /**
     * 重置密码操作
     */
    const visible = ref<boolean>(false);
    const resetformState = reactive({
      id: 0,
      newPassword: "",
    });
    const showModal = (row) => {
      resetformState.id = row.id;
      visible.value = true;
    };
    // 重置密码
    const handleResetPwd = () => {
      if (!resetformState.newPassword) {
        Message.error(t("routes.user.newPasswordCannotBeEmpty"));
        return;
      }
      resetUserPwd(resetformState.id, {
        newPassword: resetformState.newPassword,
      }).then((res) => {
        Message.success(res.message);
        resetformState.newPassword = "";
        visible.value = false;
      });
    };
    // 取消重置密码
    const handleResetClose = () => {
      resetformState.newPassword = "";
      visible.value = false;
    };

    expose({
      showModal,
    });

    return {
      t,
      visible,
      ...toRefs(resetformState),
      handleResetPwd,
      handleResetClose,
      showModal,
    };
  },
});
</script>
